<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>荔诚导航-很有范的导航站</title>
    <link rel="shortcut icon" href="favcion.ico" />
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container" id="container">
        <aside class="left-bar" id="leftBar">
            <div class="title">
                <p>荔诚导航</p>
            </div>
            <nav class="nav">
                <!--<div class="item active"><a href=""><i class="iconfont icon-daohang2"></i>极客导航</a><i class="line"></i></div> -->
                <ul class="nav-item" id="navItem">
                    <li><a href="#operation" class="active"><i class="iconfont icon-yunying"></i>个性推荐</a></li>
                    <li><a href="#bbs"><i class="iconfont icon-shequ"></i>开发社区</a></li>
                    <li><a href="#interface"><i class="iconfont icon-blogger"></i>前端开发</a></li>
                    <li><a href="#tools"><i class="iconfont icon-tool"></i>实用工具</a></li>
                    <li><a href="#design"><i class="iconfont icon-designer"></i>设计资源</a></li>
                    <li><a href="#study"><i class="iconfont icon-xuexi1"></i>学无止境</a></li>
                </ul>
                <div class="item comment"><a href="#"><i class="iconfont icon-liuyan"></i>留言</a></div>
            </nav>
        </aside>
        <section class="main">
            <div id="mainContent">
                <!-- 手机端菜单 -->
                <div id="menu-box">
                    <div id="menu">
                        <input type="checkbox" id="menu-form">
                        <label for="menu-form" class="menu-spin">
                            <div class="line diagonal line-1"></div>
                            <div class="line horizontal"></div>
                            <div class="line diagonal line-2"></div>
                        </label>
                    </div>
                </div>
                <!-- 个性推荐 -->
                <div class="box">
                    <a href="#" name="operation"></a>
                    <div class="sub-category">
                        <div><i class="iconfont icon-yunying"></i>个性推荐</div>
                    </div>
                    <div id="custom">

                        <a target="_blank" href="https://gitee.com/luxor">
                            <div class="item">
                                <div class="logo"><img src="img/gitee.png" alt="码云(Gitee)"> 码云(gitee)</div>
                                <div class="desc">由开源中国推出的代码托管平台。</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://jenkins.luxor-cms.cn">
                            <div class="item">
                                <div class="logo"><img src="img/jenkins.png" alt="Jenkins"> Jenkins</div>
                                <div class="desc">基于Java开发的一种持续集成工具。</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://maven.luxor-cms.cn">
                            <div class="item">
                                <div class="logo"><img src="img/nexus.png" alt="Nexus Repository Manager"> Nexus
                                    Repository Manager</div>
                                <div class="desc">Maven私人镜像仓库管理平台。</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://docs.luxor-cms.cn">
                            <div class="item">
                                <div class="logo"><img src="img/vue-favicon.png" alt="VuePress"> 荔诚科技·知识库</div>
                                <div class="desc">基于VuePress实现的知识库, 致力于帮助开发者快速掌握公司开发框架。</div>
                            </div>
                        </a>

                        <a target="_blank" href="https://www.dida365.com/signin">
                            <div class="item">
                                <div class="logo"><img src="img/dida365.png" alt="码云(Gitee)"> 滴答清单</div>
                                <div class="desc">一款记录工作、任务，规划时间的应用。</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://mq.luxor-cms.cn">
                            <div class="item">
                                <div class="logo"><img src="img/RabbitMQ.png" alt="RabbitMQ"> RabbitMQ</div>
                                <div class="desc">实现了高级消息队列协议（AMQP）的开源消息代理。</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://discovery.luxor-cms.cn/">
                            <div class="item">
                                <div class="logo"><img src="img/consul.ico" alt="Consul"> Consul</div>
                                <div class="desc"> Consul 是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置。 </div>
                            </div>
                        </a>
                        <a target="_blank" href="http://generator.luxor-cms.cn">
                            <div class="item">
                                <div class="logo"><img src="img/vue-favicon.png" alt="CodeGenerator"> 荔诚科技·代码生成器</div>
                                <div class="desc">基于人人代码生成器二次开发，以满足基于luxor-framework框架进行快速开发需要。</div>
                            </div>
                        </a>
                        <!-- <a target="_blank" href="http://kibana.luxor-cms.cn/">
                            <div class="item">
                                <div class="logo"><img src="img/elk.jpg" alt=" Kibana"> Kibana</div>
                                <div class="desc"> ELK是Elasticsearch、Logstash、Kibana组成的开源日志管理平台。</div>
                            </div>
                        </a> -->
                        <!-- <a target="_blank" href="http://sonarqube.luxor-cms.cn">
                            <div class="item">
                                <div class="logo"><img src="img/sonarqube.png" alt=" Sonarqube"> Sonarqube</div>
                                <div class="desc">开源的代码分析平台, 用来持续分析源代码的质量。</div>
                            </div>
                        </a> -->
                    </div>
                </div>
                <!-- 开发社区 -->
                <div class="box">
                    <a href="#" name="bbs"></a>
                    <div class="sub-category">
                        <div><i class="iconfont icon-shequ"></i>开发社区</div>
                    </div>
                    <div>
                        <a target="_blank" href="http://csdn.net/">
                            <div class="item">
                                <div class="logo"><img src="img/csdn.ico" alt="CSDN"> CSDN</div>
                                <div class="desc">中国最大的IT社区和服务平台</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.oschina.net/">
                            <div class="item">
                                <div class="logo"><img src="img/oschina.ico" alt="开源中国"> 开源中国</div>
                                <div class="desc">目前中国最大的开源技术社区</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://juejin.im/">
                            <div class="item">
                                <div class="logo"><img src="img/gold-favicon.png" alt="掘金"> 掘金</div>
                                <div class="desc">只有高手分享的中文技术社区</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.cnblogs.com/">
                            <div class="item">
                                <div class="logo"><img src="img/cnblogs.ico" alt="博客园"> 博客园</div>
                                <div class="desc">博客模式的技术分享社区</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://segmentfault.com/">
                            <div class="item">
                                <div class="logo"><img src="img/segmentfault.ico" alt="SegmentFault"> SegmentFault</div>
                                <div class="desc">一个专注于解决编程问题，提高开发技能的社区</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://github.com/">
                            <div class="item">
                                <div class="logo"><img src="img/github.ico" alt="GitHub"> GitHub</div>
                                <div class="desc">面向开源及私有软件项目的git托管平台</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web">
                            <div class="item">
                                <div class="logo"><img src="img/Mozilla.png" alt="mozilla"> MDN Web Docs</div>
                                <div class="desc">Mozilla基金会，Web权威开发指南</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://coding.net/">
                            <div class="item">
                                <div class="logo"><img src="img/coding.png" alt=" Coding"> Coding</div>
                                <div class="desc">中国最大的git平台</div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 前端开发 -->
                <div class="box">
                    <a href="#" name="interface"></a>
                    <div class="sub-category">
                        <div><i class="iconfont icon-blogger"></i>前端开发</div>
                    </div>
                    <div>
                        <a target="_blank" href="https://tdesign.tencent.com/">
                            <div class="item">
                                <div class="logo"><img src="img/tdesign.ico"> TDesign </div>
                                <div class="desc">TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://element-plus.org/zh-CN/">
                            <div class="item">
                                <div class="logo"><img src="img/element-plus.svg"> Element UI</div>
                                <div class="desc">基于 Vue 3，面向设计师和开发者的组件库</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://arco.design/">
                            <div class="item">
                                <div class="logo"><img src="img/arco-design.png"> Arco Design</div>
                                <div class="desc">基于 Ant Design，企业级产品的完整设计和开发解决方案</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://vant-contrib.gitee.io/vant/#/zh-CN">
                            <div class="item">
                                <div class="logo"><img src="img/vant.png"> Vant 4</div>
                                <div class="desc">Vant 是一个轻量、可靠的移动端 Vue 组件库</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://cn.vitejs.dev/">
                            <div class="item">
                                <div class="logo"><img src="img/vite.svg" alt="Vite"> Vite</div>
                                <div class="desc">Vite 下一代的前端工具链</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://v3.cn.vuejs.org/">
                            <div class="item">
                                <div class="logo"><img src="img/vue-favicon.png" alt="Vue.js"> Vue.js</div>
                                <div class="desc">构建数据驱动的web界面的渐进式框架</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://router.vuejs.org/zh/">
                            <div class="item">
                                <div class="logo"><img src="img/vue-favicon.png" alt="VueRouter"> Vue Router</div>
                                <div class="desc">Vue.js的官方路由</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://pinia.vuejs.org/zh/">
                            <div class="item">
                                <div class="logo"><img src="img/pinia.svg" alt="Pinia"> Pinia</div>
                                <div class="desc">Pinia 值得你喜欢的 Vue Store</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.axios-http.cn/">
                            <div class="item">
                                <div class="logo"><img src="img/axios.png" alt="Axios"> Axios</div>
                                <div class="desc">Axios 是一个基于 promise 的网络请求库</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://v2.vuepress.vuejs.org/zh/">
                            <div class="item">
                                <div class="logo"><img src="img/VuePress.png" alt="VuePress"> VuePress</div>
                                <div class="desc">Vue 驱动的静态网站生成器</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.tslang.cn/index.html">
                            <div class="item">
                                <div class="logo"><img src="img/TypeScript.png" alt="TypeScript"> TypeScript</div>
                                <div class="desc">TypeScript是JavaScript的超集</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://jquery.cuishifeng.cn/index.html">
                            <div class="item">
                                <div class="logo"><img src="img/jquery.png" alt="jQuery"> jQuery</div>
                                <div class="desc">优秀的JavaScript代码库</div>
                            </div>
                        </a>
                        <!--
                        <a target="_blank" href="https://v5.bootcss.com/">
                            <div class="item">
                                <div class="logo"><img src="img/bootstrap-favicon.png" alt="Bootstrap"> Bootstrap</div>
                                <div class="desc">基于HTML/CSS/Javscript的前端框架</div>
                            </div>
                        </a>
                        -->
                    </div>
                </div>
                <!-- 实用工具 -->
                <div class="box">
                    <a href="#" name="tools"></a>
                    <div class="sub-category">
                        <div><i class="iconfont icon-tool"></i>实用工具</div>
                    </div>
                    <div>
                        <a target="_blank" href="http://www.bejson.com/">
                            <div class="item">
                                <div class="no-logo">JSON格式化</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://tool.lmeee.com/fenlei/zhanzhang">
                            <div class="item">
                                <div class="no-logo">拉米工具</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://tool.jisuapi.com/base642pic.html">
                            <div class="item">
                                <div class="no-logo">BASE64图片编解码</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://cli.im/deqr">
                            <div class="item">
                                <div class="no-logo">二维码在线生成</div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 设计资源 -->
                <div class="box">
                    <a href="#" name="design"></a>
                    <div class="sub-category">
                        <div><i class="iconfont icon-designer"></i>设计资源</div>
                    </div>
                    <div>
                        <a target="_blank" href="http://www.uigreat.com/">
                            <div class="item">
                                <div class="logo"><img src="img/uigreat-favicon.jpg"> UIGREAT</div>
                                <div class="desc">优秀设计师的贴心伴侣</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://huaban.com/">
                            <div class="item">
                                <div class="logo"><img src="img/huaban-favicon.png"> 花瓣</div>
                                <div class="desc">花瓣，陪你做生活的设计师</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://dribbble.com/">
                            <div class="item">
                                <div class="logo"><img src="img/dribbble-favicon.png"> Dribbble</div>
                                <div class="desc">设计作品的交流平台</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.behance.net/">
                            <div class="item">
                                <div class="logo"><img src="img/behance-favicon.png"> Behance</div>
                                <div class="desc">系列设计作品开放平台</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.pinterest.com/">
                            <div class="item">
                                <div class="logo"><img src="img/pinterest-favicon.png"> Pinterest</div>
                                <div class="desc">图片分享类的社交网站</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://www.zcool.com.cn/">
                            <div class="item">
                                <div class="logo"><img src="img/zcool-favicon.jpg"> 站酷</div>
                                <div class="desc">打开站酷,发现更好的设计!</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://thefwa.com/">
                            <div class="item">
                                <div class="logo"><img src="img/thefwa-favicon.png"> FWA</div>
                                <div class="desc">互动多媒体网站收录平台</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.iconfont.cn">
                            <div class="item">
                                <div class="logo"><img src="img/iconfont.png"> iconfont</div>
                                <div class="desc">阿里妈妈MUX倾力打造的矢量图标管理、交流平台。</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://www.alloyteam.com/">
                            <div class="item">
                                <div class="logo"><img src="img/alloyteam-favicon.jpg" alt="腾讯 AlloyTeam 团队"> 腾讯 AlloyTeam 团队</div>
                                <div class="desc">腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://isux.tencent.com/">
                            <div class="item">
                                <div class="logo"><img src="img/isux-favicon.jpg" alt="ISUX"> ISUX</div>
                                <div class="desc">腾讯社交用户体验设计，简称ISUX，腾讯设计团队网站</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://fex.baidu.com/">
                            <div class="item">
                                <div class="logo"><img src="img/fex-favicon.png"> FEX</div>
                                <div class="desc">百度Web前端研发部出品</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://aotu.io/">
                            <div class="item">
                                <div class="logo"><img src="img/aotu-favicon.png"> 凹凸实验室</div>
                                <div class="desc">京东用户体验设计部出品</div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 学无止境 -->
                <div class="box">
                    <a href="#" name="study"></a>
                    <div class="sub-category">
                        <div><i class="iconfont icon-xuexi1"></i>学无止境</div>
                    </div>
                    <div>
                        <a target="_blank" href="https://www.w3cschool.cn/">
                            <div class="item">
                                <div class="no-logo">w3cschool</div>
                                <div class="desc">学编程，从W3cschool开始</div>
                            </div>
                        </a>
                        <a target="_blank" href="https://www.imooc.com/">
                            <div class="item">
                                <div class="no-logo">慕课网</div>
                                <div class="desc">程序员的梦工厂</div>
                            </div>
                        </a>
                        <a target="_blank" href="http://study.163.com/">
                            <div class="item">
                                <div class="no-logo">网易云课堂</div>
                                <div class="desc">网易公司研发的一款大型在线教育平台服务</div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 底部区域 -->
                <footer class="footer">
                    <div class="copyright">
                        <div>
                            Copyright © 2018- 2050 免责声明：本站内容来源于网络，源码参照极客导航，如有侵权请联系我 819903025@qq.com
                        </div>
                    </div>
                </footer>
                <!-- 快速返回 -->
                <div id="fixedBar"><svg class="Zi Zi--BackToTop" title="回到顶部" fill="currentColor" viewBox="0 0 24 24"
                        width="24" height="24">
                        <path
                            d="M16.036 19.59a1 1 0 0 1-.997.995H9.032a.996.996 0 0 1-.997-.996v-7.005H5.03c-1.1 0-1.36-.633-.578-1.416L11.33 4.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.005z">
                        </path>
                    </svg></div>
        </section>

        <script src="js/jquery.js"></script>
        <script>
            var oMenu = document.getElementById('menu');
            var oLeftBar = document.getElementById('leftBar');
            var menuFrom = document.getElementById('menu-form');

            oMenu.onclick = function () {
                if (oLeftBar.offsetLeft == 0) {
                    oLeftBar.style.left = -249 + 'px';
                }
                else {
                    oLeftBar.style.left = 0;
                }
            }

            // 监听页面宽度变化
            window.onresize = function () {
                judgeWidth();
                // console.log(document.documentElement.clientWidth);
            };

            // 判断页面宽度
            function judgeWidth() {
                if (document.documentElement.clientWidth > 481) {
                    oLeftBar.style.left = 0;
                } else {
                    oLeftBar.style.left = -249 + 'px';
                }
            }

            var oNavItem = document.getElementById('navItem');
            var aA = oNavItem.getElementsByTagName('a');
            for (var i = 0; i < aA.length; i++) {
                aA[i].onclick = function () {
                    for (var j = 0; j < aA.length; j++) {
                        aA[j].className = '';
                    }
                    this.className = 'active';
                    if (oLeftBar.offsetLeft == 0) {
                        if (document.documentElement.clientWidth <= 481) {
                            oLeftBar.style.left = -249 + 'px';
                            menuFrom.checked = false;

                        }
                    }
                }
            }

            $(window).scroll(function () {
                if ($(window).scrollTop() >= 200) {
                    $('#fixedBar').fadeIn(300);
                } else {
                    $('#fixedBar').fadeOut(300);
                }
            });
            $('#fixedBar').click(function () {
                $('html,body').animate({ scrollTop: '0px' }, 800);
            })

            // 添加自定义网站
            var addCustomIndex = function (item) {
                $("#custom").append(
                    '<a target="_blank" href="' + item.url + '">' +
                    '<div class="item">' +
                    '<div class="logo"><img src="' + item.icon + '" alt="' + item.name + '"> ' + item.name + '</div>' +
                    '<div class="desc"> ' + item.about + '</div>' +
                    '</div>' +
                    '</a>'
                );
            }
        </script>
</body>

</html>